<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>用户空间</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/space.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin.css">
</head>

<body>
<p id="notice_p" style="float: right;margin-top: 20px;color: red;font-size: 18px;margin-right: 50px;"> </p>
    <nav>
        <h1>${user.userName}（${user.userPosition }）</h1>
        <ul>
            <li><a href="/index">主页</a></li>
            <li><a href="/logout">退出登录</a></li>
        </ul>
    </nav>
    <main>
        <aside class="side_menu">
            <ul>
                <li itemid="0" class="side_menu_item">个人信息</li>
                <c:if test="${user.userPosition!='伸手党'}">
                	<li itemid="1" class="side_menu_item">我的app</li>
                	<li itemid="2" class="side_menu_item">app上传</li>
                </c:if>
                
            </ul>
            <ul>
	            <li itemid="3" class="side_menu_item">用户管理</li>
	            <li itemid="4" class="side_menu_item">分类管理</li>
	            <li itemid="5" class="side_menu_item">app管理</li>
	            <%-- <li>角色晋级审核</li>
	            <li>app上架审核</li>--%>
        	</ul>
        </aside>
        <div class="window">
            <div class="area" style="display: block;">
                <h2>个人信息</h2>
                <div style="margin: auto;width: fit-content;">
                <c:if test="${user.userAvatar==null}">
                	<img id="user_avatar_view" style="margin: 50px 0;max-width:300px;max-height:300px" alt="" 
                    	src="${pageContext.request.contextPath}/img/interesting.gif">
                </c:if>
                <c:if test="${user.userAvatar!=null}">
                	<img id="user_avatar_view" style="margin: 50px 0;max-width:300px;max-height:300px" alt="" 
                    	src="${pageContext.request.contextPath}${user.userAvatar}">
                </c:if>
                	<table class="user_info_table">
                		<tr>
                			<td>昵称</td>
                			<td>
                                <input type="text" disabled value="${user.userName }" id="use_name_input" required class="user_info_input">
                            </td>
                		</tr>
                        <tr>
                			<td>账号</td>
                			<td>${user.userAccount}</td>
                		</tr>
                        <tr>
                			<td>密码</td>
                			<td>
                                <input type="text" disabled value="${user.userPassword}" id="user_pw_input" required class="user_info_input">
                            </td>
                		</tr>
                        <tr>
                			<td>等级</td>
                			<td>${user.userPosition }</td>
                		</tr>
                        <tr>
                			<td colspan="2" style="margin-top:20px;">
                                <button id="alter_user_info">修改</button>
                            </td>
                		</tr>
                	</table>
                </div>
                <input style="display:none;" type="file" id="user_avatar_file"/>
            </div>
            <div class="area">
                <h2>我的app</h2>
                <ul class="my_app_list">
                <c:forEach items="${my_app }" var="app">
                	<li style="position: relative;">
                		<img style="width: 100%;height: 100%" alt="" src="${pageContext.request.contextPath}${app.appLogo}">
                		<div>
                		<p style="font-size: 18px;color: white;">${app.appName}</p>
                		<select appName="${app.appName}" style="margin: 20px 0" class="change_app_category">
                            <option>app分类: ${app.appCategory}</option>
                            <c:forEach items="${category }" var="categoryItem">
	                                	<option>${categoryItem }</option>
	                                </c:forEach>
                		</select>
                		<select appName="${app.appName}" class="change_app_statue">
                            <option>app状态: ${app.appState}</option>
                			<option>上架</option>
                			<option>下架</option>
                			<option>删除</option>
                		</select>
                	</div></li>
                </c:forEach>
                </ul>
            </div>
            <div class="area">
                <div class="uploading_mask" id="uploading_mask">
                    <div class="uploading_div">
                        <p id="uploading_progress_percentage">正在上传中......0%</p>
                        <div class="uploading_progress">
                            <div class="uploading_progress_inner" id="uploading_progress_inner"></div>
                        </div>
                    </div>

                </div>
                <h2>app上传</h2>
                <div class="area_upload_app">
                    <img class="app_icon_view" id="app_icon_view" src="../../img/android.png" />
                    <div class="app_shot_view">
                        <ul id="app_shot_img">
                        </ul>
                    </div>
                    <table>
                        <tr>
                            <td>app名</td>
                            <td>
                                <input type="text" required name="app_name" id="app_name"/>
                            </td>
                        </tr>
                        <tr>
                            <td>app分类</td>
                            <td>
                                <select id="app_category">
	                                <c:forEach items="${category }" var="categoryItem">
	                                	<option>${categoryItem }</option>
	                                </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>app介绍</td>
                            <td>
                                <textarea name="app_desc" id="app_desc" required></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>app 文件</td>
                            <td>
                                <input type="file" id="app_file" required name="app_file" accept=".apk" />
                            </td>
                        </tr>
                        <tr>
                            <td>app logo</td>
                            <td>
                                <input type="file" id="app_icon" required name="app_icon" accept="image/*" />
                            </td>
                        </tr>
                        <tr>
                            <td>app 截图</td>
                            <td>
                                <input type="file" multiple required name="app_shot" id="app_shot" accept="image/*" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <button id="uploading_btn">点击确认上传</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="area">
            	<h2>用户管理</h2>
            	<table class="m_category_table">
            		<thead>
            			<tr>
            				<td>用户头像</td>
            				<td>用户昵称</td>
            				<td>账号</td>
            				<td>密码</td>
            				<td>等级</td>
                            <td>操作</td>
            			</tr>
            		</thead>
            		<tbody>
            		<c:forEach items="${m_all_user }" var="m_user">
            			<tr>
            				<td>
            					<c:choose>
            						<c:when test="${m_user.userAvatar!=null }">
            						<img style="max-width: 150px;max-height: 150px;" alt="" src="${pageContext.request.contextPath}${m_user.userAvatar}">
            						</c:when>
            						<c:otherwise>
            						<img style="max-width: 150px;max-height: 150px;" alt="" src="${pageContext.request.contextPath}/img/interesting.gif">
            						</c:otherwise>
            					</c:choose>
            				</td>
            				<td>
            					<input account="${m_user.userAccount }" type="text" disabled="disabled" value="${m_user.userName }">
            				</td>
            				<td>
            					<input account="${m_user.userAccount }" type="text" disabled="disabled" value="${m_user.userAccount }">
            				</td>
            				<td>
            					<input account="${m_user.userAccount }" type="text" disabled="disabled" value="${m_user.userPassword }">
            				</td>
            				<td>
            					<select account="${m_user.userAccount }" disabled="disabled">
            						<option>你是  ${m_user.userPosition }</option>
            						<option>伸手党</option>
            						<option>搬运工</option>
            						<option>个人开发者</option>
            						<option>专业团队</option>
            						<option>站长</option>
            						<option>冻结</option>
            					</select>
            				</td>
            				<td style="width: 225px;"><button account="${m_user.userAccount }" class="update_user_btn">修改</button>
                    		<button style="background-color: red;" account="${m_user.userAccount }" class="del_user_btn">删除</button></td>
            			</tr></c:forEach>
            		</tbody>
            	</table>
        	</div>
        	<div class="area">
            	<button style="width: 120px;float: right" id="add_category_btn">添加分类</button>
            	<h2>分类管理</h2>
                <table class="m_category_table">
                    <thead>
                    	<tr>
                    		<td>分类</td>
                    		<td>说明</td>
                    		<td>操作</td>
                    	</tr>
                    </thead>
                    <tbody id="m_category_table_tobody">
                    <c:forEach items="${m_category }" var="m_category_obj">
                    	<tr>
                    		<td><input category="${m_category_obj.categoryName }" type="text" value="${m_category_obj.categoryName }" required="required" disabled="disabled"></td>
                    		<td><input category="${m_category_obj.categoryName }" type="text" value="${m_category_obj.categoryExplain }" required="required" disabled="disabled"></td>
                    		<td><button category="${m_category_obj.categoryName }" class="update_category_btn">修改</button>
                    		<button category="${m_category_obj.categoryName }" style="background-color: red;" class="del_category_btn">删除</button></td>
                    	</tr>
                    </c:forEach>
                    </tbody>
                </table>
        	</div>
        	<div class="area">
            	<h2>app管理</h2>
            	<ul class="my_app_list">
                <c:forEach items="${m_all_app }" var="app">
                	<li style="position: relative;">
                		<img style="width: 100%;height: 100%" alt="" src="${pageContext.request.contextPath}${app.appLogo}">
                		<div>
                		<p style="font-size: 18px;color: white;">${app.appName}</p>
                		<p style="margin-top: 10px;color: white;">上传者:${app.appFrom}</p>
                		<select appName="${app.appName}" style="margin: 20px 0" class="change_app_category">
                            <option>app分类: ${app.appCategory}</option>
                            <c:forEach items="${category }" var="categoryItem">
	                                	<option>${categoryItem }</option>
	                                </c:forEach>
                		</select>
                		<select appName="${app.appName}" class="change_app_statue">
                            <option>app状态: ${app.appState}</option>
                			<option>上架</option>
                			<option>下架</option>
                			<option>删除</option>
                		</select>
                	</div></li>
                </c:forEach>
                </ul>
        	</div>
        </div>
    </main>
    <script src="${pageContext.request.contextPath}/js/admin.js"></script>
    <script src="${pageContext.request.contextPath}/js/space.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.js"></script>
</body>

</html>